﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>选择器</title>
    <style>
        /****************** 属性选择器 **********************/
        /*完全匹配属性选择器*/ 
         [id=artical] {
             color:red
         }
        /*包含匹配选择器*/ 
        [id*=good] {
            color:blueviolet
        }
        /*首字符匹配选择器*/ 
        [id^=fir] {
            color:blue
        }
        /*尾字符匹配选择器*/ 
        [id$=las] {
            color:#00bfff
        }
       /****************** 伪类选择器 **********************/
       /* a:link a:visited a:hover a:active */
        /*在p元素之前插入文字*/
        p:before {
            content: "你好";
        }
       /*在p元素之后插入文字*/
       p:after {
           content: "世界"
       }
       /*元素列表第一个元素的样式*/
       li:first-child {
           color: red
       }
       /*元素列表最后一个元素的样式*/
       li:last-child {
           color: blueviolet
       }
       /*元素列表正数第几个元素的样式*/
       li:nth-child(2) {
           color: #00bfff
       }
       /*元素列表倒数第几个元素的样式*/
       li:nth-last-child(2) {
           color: #000080
       }

    </style>
</head>
<body>
    <div id="artical">测试完全匹配属性选择器</div>

    <div id="good">测试包含匹配选择器</div>
    <div id="sungood"> 测试包含匹配选择器</div>
    <div id="subgood">测试包含匹配选择器</div>

    <div id="fir">测试首字符匹配选择器</div>
    <div id="firqws"> 测试首字符匹配选择器</div>
    <div id="firdfrr">测试首字符匹配选择器</div>

    <div id="las">测试尾字符匹配选择器</div>
    <div id="qwslas"> 测试尾字符匹配选择器</div>
    <div id="dfrrlas">测试尾字符匹配选择器</div>


<div>
    <p>haha</p>
</div>
<ul>
    <li>第一个元素</li>
    <li>第二个元素</li>
    <li>第三个元素</li>
    <li>第四个元素</li>
    <li>最后一个元素</li>
</ul>
</body>
</html>